<template>
  <view class="container">
    <hello-title></hello-title>
    <view style="height: 24px"></view>
    <view class="page-title page-title--no-padding">尿酸</view>
    <view v-for="record in recordList" :key="record.time">
      <view class="data-card-area" v-if="record.value">
        <view class="page-title page-title--sub page-title--no-padding">{{
          record.regDay
        }}</view>
        <view v-if="getWaringTest(record.value)" class="waring">{{
          getWaringTest(record.value)
        }}</view>
        <view
          class="data-card data-card--red"
          v-for="(value, name) in record.value"
          v-bind:key="value + name"
        >
          <view class="data-card__head">
            <text>{{ getName(name) }}</text>
            <view class="data-card__icon data-card__icon--blood"></view>
          </view>
          <view class="data-card__content">
            <text>{{ value }}</text>
            <text class="unit">{{ getUnit(name) }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="height-spacer"></view>
    <view class="margin-v--normal fix-bottom">
      <button class="button--block button--purple" @tap="showCreateActionSheet">
        添加数据
      </button>
    </view>
    <!--    底部操作栏-->
    <AtModal
      :isOpened="isCreateActionSheetOpen"
      :onClose="closeCreateActionSheet"
      v-if="isCreateActionSheetOpen"
    >
      <AtModalContent>
        <view>
          <view class="input-row">
            <view class="input-row__label">尿蛋白</view>
            <view class="input-row__content"
              ><input v-model="niaodanbaiInput" type="digit" placeholder="mg/L"
            /></view>
          </view>
        </view>
        <view class="input-row">
          <view class="input-row__label">尿酸</view>
          <view class="input-row__content"
            ><input v-model="niaosuanInput" type="digit" placeholder="umol/L"
          /></view>
        </view>
      </AtModalContent>
      <AtModalAction>
        <button @tap="addRecord" class="custom-button">提交</button>
      </AtModalAction>
    </AtModal>
  </view>
</template>

<script>
import "./index.less";
import helloTitle from "../../../common-components/hello-title/hello-title";
import { getHistoryData } from "../../../services/healthy-data-service";
import {
  AtInput,
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction
} from "taro-ui-vue";
import findIndex from "lodash.findindex";
import get from "lodash.get";

const { updateRenal } = require("../../../services/healthy-data-service");

/**
 * this.data[0] ={
 dayOfMonth: 11
 dayOfWeek: 6
 regDay: "2021-09-11"
 time: 1631289600000
 value:{niaosuan: 20
 niaoweiliangdanbai: 30}
}
 */
export default {
  name: "index",
  components: {
    helloTitle,
    AtModal,
    AtModalContent,
    AtModalAction
  },
  data() {
    return {
      recordList: [
        {
          dayOfMonth: "--",
          dayOfWeek: "--",
          regDay: "--",
          time: "--",
          value: {
            niaosuan: "--",
            niaoweiliangdanbai: "--"
          }
        }
      ],
      isCreateActionSheetOpen: false,
      niaosuanInput: "",
      niaodanbaiInput: ""
    };
  },
  methods: {
    async addRecord() {
      await updateRenal({
        niaosuan: this.niaosuanInput,
        niaoweiliangdanbai: this.niaodanbaiInput
      });
      await this.initData();
    },
    async initData() {
      this.isCreateActionSheetOpen = false;
      const recordList = await getHistoryData("DAY_OF_MONTH", "RENAL");
      this.recordList = recordList.reverse();
      console.log("肾功能健康记录:", this.recordList);
    },
    showCreateActionSheet() {
      this.isCreateActionSheetOpen = true;
    },
    closeCreateActionSheet() {
      this.isCreateActionSheetOpen = false;
    },
    handleTypeChange(e) {
      this.renalInputType = this.selectebleList[parseInt(e.detail.value)];
    },
    handleValueChange(e) {
      console.log(e);
    },
    getName(key) {
      switch (key) {
        case "niaosuan":
          return "尿酸";
          break;
        case "niaoweiliangdanbai":
          return "尿微量蛋白";
          break;
        default:
          return "--";
          break;
      }
    },
    getUnit(key) {
      switch (key) {
        case "niaosuan":
          return "umol/L";
          break;
        case "niaoweiliangdanbai":
          return "mg/L";
          break;
        default:
          return "--";
          break;
      }
    },
    getWaringTest(value) {
      if (value['niaosuan'] < 149) {
        return '您的尿酸值偏低，建议合理饮食，荤素搭配'
      }

      if (value['niaosuan'] > 357) {
        return '您的尿酸值偏高，请减少高嘌呤食物摄入'
      }

      if (value['niaoweiliangdanbai'] > 20) {
        return '您的尿微量蛋白超出正常范围，提示肾损伤，请控制蛋白类的摄入'
      }

      return ''
    }
  },
  async created() {
    await this.initData();
  }
};
</script>
